<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="4">
        <!-- <el-row justify="end">
          <el-button link type="success">仪器预约总览</el-button>
        </el-row> -->
        <el-row>
          <p class="pinformation">仪器种类列表</p>
          <p class="totalStyle">共 {{ projectList.length }} 条数据</p>
        </el-row>
        <el-table ref="mainTableRef" :data="projectList" @row-click="rowClick" :row-class-name="tableRowClass">
          <el-table-column prop="instrumentTypeName" label="采样仪器种类" align="center" />
        </el-table>
      </el-col>
      <el-col :span="20">
        <el-row>
          <p class="pinformation" style="margin-top: 9px">
            仪器对应检测项目列表
          </p>
          <p class="totalStyle" style="margin-top: 6px">
            共 {{ total }} 条数据
          </p>
          <el-form-item label="点位数量：" style="margin-left: 10px">{{
            countForm.pointCount || 0
          }}</el-form-item>
          <el-form-item label="样品编号数：" style="margin-left: 10px">{{
            countForm.sampleCount || 0
          }}</el-form-item>
        </el-row>
        <el-table ref="subTableRef" :data="dyProjectList" style="margin-bottom: 10px">
          <el-table-column prop="jclbId" label="检测类别" align="center">
            <template #default="scope">
              {{
                proxy.getItemByArray(
                  jclbList,
                  "jclbId",
                  scope.row.jclbId,
                  "jclbName"
                )
              }}
            </template>
          </el-table-column>
          <el-table-column prop="pointName" label="点位名称" align="center" />
          <el-table-column prop="sampleCode" label="样品编号" align="center" />
          <el-table-column prop="jcxmName" label="检测项目" align="center">
            <template #default="scope">
              <span v-html="proxy.getSupAndSub(scope.row.jcxmName)"></span>
            </template>
          </el-table-column>
          <el-table-column prop="sampleDay" label="连测天数" align="center" />
          <el-table-column prop="sampleCount" label="每天频次" align="center" />
          <el-table-column label="是否分包" align="center">
            <template #default="scope">
              {{
                scope.row.isPackage == 0
                ? "否"
                : "是"
              }}
            </template>
          </el-table-column>
          <el-table-column prop="instrumentDesc" label="仪器描述" align="center" width="300" />
          <el-table-column prop="methodCode" label="方法编号" align="center" />
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button link type="success" @click="imageView(scope.row)" v-if="scope.row.sampleFileId">查看截图</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="total" v-model:page="getJcxmInstrumentForm.pageNum"
          v-model:limit="getJcxmInstrumentForm.pageSize" @pagination="getPageList" />
        <el-row>
          <el-col :span="14">
            <el-row>
              <p class="pinformation" style="margin-top: 10px">备选仪器列表</p>
              <p class="totalStyle" style="margin-top: 7px">
                共 {{ total }} 条数据
              </p>
              <el-form-item label="选择预约时间：" style="width: 34%; margin-left: 10px">
                <el-date-picker v-model="form.beginDate" placeholder="请选择" type="date" value-format="YYYY-MM-DD" />
              </el-form-item>
              <el-form-item label="预约归还时间：" style="width: 34%; margin-left: 10px">
                <el-date-picker v-model="form.beginDate" placeholder="请选择" type="date" value-format="YYYY-MM-DD" />
              </el-form-item>
            </el-row>
            <el-table :data="bxProjectList" ref="bxTableRef">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column prop="projectCode" label="仪器名称" align="center" />
              <el-table-column prop="projectCode" label="仪器型号" align="center" />
              <el-table-column prop="projectCode" label="仪器编号" align="center" />
              <el-table-column prop="projectCode" label="当日状态" align="center" />
              <el-table-column prop="projectCode" label="使用人" align="center" />
              <el-table-column prop="projectCode" label="出库时间" align="center" />
            </el-table>
          </el-col>
          <el-col :span="2" style="color: green; font-size: 20px">
            <el-row style="margin-bottom: 20px; margin-top: 120px" justify="center"><el-icon>
                <ArrowRightBold />
              </el-icon><el-icon>
                <ArrowRightBold />
              </el-icon></el-row>
            <el-row justify="center"><el-icon>
                <ArrowLeftBold />
              </el-icon><el-icon>
                <ArrowLeftBold />
              </el-icon></el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <p class="pinformation" style="margin-top: 10px">
                已预约仪器列表
              </p>
              <p class="totalStyle" style="margin-top: 7px; margin-bottom: 21px">
                共 {{ total }} 条数据
              </p>
            </el-row>
            <el-table :data="reservedProjectList" ref="reservedTableRef">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column prop="projectCode" label="仪器名称" align="center" />
              <el-table-column prop="projectCode" label="仪器型号" align="center" />
              <el-table-column prop="projectCode" label="仪器编号" align="center" />
              <el-table-column prop="projectCode" label="预约时间" align="center" />
            </el-table>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-image-viewer v-if="showViewer" :url-list="[url]" />
  </div>
</template>

<script setup>
import {
  getInstrumentList,
  getJcxmInstrumentData,
  getCount,
} from "@/api/cyCheck/cyReady";
import { allListJclb } from "@/api/store/jclb";
const { proxy } = getCurrentInstance();

const countForm = ref({});

const total = ref(0);
const projectList = ref([]);
const dyProjectList = ref([]);
const bxProjectList = ref([]);
const reservedProjectList = ref([]);
const jclbList = ref([]);
const form = ref({});
const getJcxmInstrumentForm = ref({
  pageNum: 1,
  pageSize: 10,
});

const props = defineProps({
  projectId: {
    type: String, //参数类型
  },
});

function getInstrList() {
  getInstrumentList(props.projectId).then((res) => {
    projectList.value = res.data ? res.data : [];
  });
}

const apiInstrumentType = ref();

function rowClick(row) {
  apiInstrumentType.value = row.instrumentType;
  getJcxmInstrumentData(
    props.projectId,
    row.instrumentType,
    getJcxmInstrumentForm.value
  ).then((res) => {
    dyProjectList.value = res.rows;
    total.value = res.total;
    heightBright.value = row.instrumentType;
  });
  getCount({
    projectId: props.projectId,
    instrumentType: row.instrumentType,
  }).then((res) => {
    countForm.value = res.data;
  });
}

function getPageList() {
  getJcxmInstrumentData(
    props.projectId,
    apiInstrumentType.value,
    getJcxmInstrumentForm.value
  ).then((res) => {
    dyProjectList.value = res.rows;
  });
}

allListJclb().then((res) => {
  jclbList.value = res.data;
});

getInstrList();

const heightParams = ref([
  { tableName: "main", bottomHeight: 21 },
  { tableName: "sub", bottomHeight: 440 },
  { tableName: "bx", bottomHeight: 21 },
  { tableName: "reserved", bottomHeight: 21 },
]);
function getTableHeight() {
  nextTick(function () {
    proxy.adaptiveHeight(proxy, heightParams.value);
  });
}
onMounted(() => {
  nextTick(function () {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  });
})
onUpdated(() => {
  nextTick(function () {
    getTableHeight();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});

const heightBright = ref();
function tableRowClass({ row }) {
  if (row) {
    if (row.instrumentType == heightBright.value) {
      return "current-row";
    }
    return "";
  }
}

// -----------------------图片预览----------------------
const showViewer = ref(false);
const url = ref("");

function imageView(row) {
  proxy.$download.previewSharePicById(row.sampleFileId).then((resp) => {
    url.value = resp;
    showViewer.value = true;
    nextTick(() => {
      $(".el-image-viewer__close").click(function () {
        showViewer.value = false;
      });
    });
  });
}
</script>

<style></style>
